<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="/usercp/layui/css/layui.css" media="all">
      <link rel="stylesheet" href="/usercp/style/admin.css" media="all">
  </head>
  <body>
    <div class="m-site-framebody">
      
      <div class="layui-form" lay-filter="setting">
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">站点名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入站点名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">所属客户</label>
          <div class="layui-inline" style="width: 148px;">
                <select name="custom_id" lay-filter="custom" required lay-verify="required" lay-search>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">站点类型</label>
          <div class="layui-input-block">
              <input type="checkbox" name="app_type[]" lay-filter="app_type" value="baidu"  title="百度小程序" checked>
          </div>
        </div>
        <div class="layui-form-item" >
          <label class="layui-form-label">计费方式</label>
          <div class="layui-inline" style="width: 88px;display: none;" id="number">
            <div class="layui-input-inline"> <!-- 注意：这一层元素并不是必须的 -->
              <input type="text" name="number" id="number_input" placeholder="开通时长" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline" style="width: 148px;">
            <select name="type" id="type" lay-filter="type">
              <option value="forever">永久</option>
              <option value="year">年</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">应付金额</label>
          <div class="layui-input-block">
            <input type="text" name="fee" id="fee" disabled="disabled" value="" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item" style="width: 360px;">
          <label class="layui-form-label">可用余额</label>
          <div class="layui-input-block">
            <input type="text" name="balance" id="balance" disabled="disabled" value="" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item layui-hide">
          <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
        </div>  
      </div>
    </div>
    <style>
      html {
        background-color: #fff;
      }
      .m-site-framebody {
        padding: 10px 15px;
      }
      .m-site-framebody-header {
        margin-bottom: 20px;
        padding-bottom: 10px;
        font-size: 14px;
        border-bottom: 1px solid #e6e6e6;
      }
      .layui-table, .layui-table-view {
        margin: 0;
      }
    </style>
      <script src="/usercp/layui/layui.js"></script>
    <script>
    layui.use(['form'], function(){
        var form = layui.form;
        var $ = layui.$;
        
        $.get('/usercp/site/custom_lists', {}, function (data) {
                var $html = "";
                if(data.data != null){
                    $.each(data.data, function (index, item) {
                      $html += "<option value='" + item.current_id + "'>" + item.username + "</option>";
                    });
                $("select[name='custom_id']").append($html);
                //append后必须从新渲染
                form.render('select');
             }
        })
        get_fee('forever');
        form.on('select(type)', function(data){
            var number_choose = document.getElementById("number");
            if(data.value == 'year' || data.value == 'quarter' || data.value == 'month'){
                number_choose.style.display = '';
                $('#number_input').attr('lay-verify','required|number');
                if($('#number_input').val() != ''){
                    get_fee(data.value,$('#number_input').val())
                }
            }else{
                number_choose.style.display = 'none';
                $('#number_input').removeAttr('lay-verify');
                get_fee(data.value)
            }
        }); 

        $('#number_input').keyup(function(){
            var number_input = $('#number_input').val();
            var type_select = $('#type').val();
            get_fee(type_select,number_input)
        })

        function get_fee(type,value){
            value = parseInt(value);
            if(type != 'forever' && (isNaN(value) || !value)){
                $('#fee').val(0);
                form.render('select');
                return false;
            }
            $.get('/usercp/site/get_create_fee', {'type':type,'number':value}, function (data) {
                if(data.data != null){
                    $('#fee').val(data.data.fee);
                    $('#balance').val(data.data.balance)
                    form.render('select');
                 }
            })      
        }
        
        // 监听提交，测试用例
        form.on('submit(form)', function(data){
          var field = data.field;
          $.ajax({
                  url: '/usercp/site/create',
                  type: "POST",
                  data: field,
                  dataType: 'json',
                  success: function (res) {
                    if (res.code == 0){
                        layer.msg(res.msg, {
                          offset: '50px'
                          ,icon: 2
                          ,anim: 6
                          ,time: 1000
                        }, function(){});
                        return false;
                      }else{
                        layer.msg('创建成功！', {
                          offset: '15px'
                          ,icon: 1
                          ,time: 1000
                        }, function(){
                      });
                    }
                    return false;
                  }
              })
        });
    });
    </script>
  </body>
</html>
